<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>作业3钟奕升</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      ul,
      li {
        list-style: none;
      }
      a {
        text-decoration: none;
      }
      .nav {
        background: url(images/top_bg.gif) repeat-x;
        height: 27px;
      }
      .wrap {
        width: 1000px;
        margin: 0 auto;
      }
      .logo {
        float: left;
      }
      .nav ul {
        float: right;
      }
      .nav ul li {
        float: left;
        font-size: 12px;
        line-height: 27px;
        margin: 0 6px;
      }
      .nav ul li > a {
        color: #888;
      }
      .nav ul li.sep {
        color: #ccc;
      }
      .webnav {
        position: relative;
        width: 60px;
      }
      .webnav > img {
        float: right;
        margin-top: 12px;
      }
      .webnav .menu {
        position: absolute;
        width: 190px;
        padding: 20px;
        border-bottom: 1px solid #ccc;
        right: 0;
        display: none;
      }
      .webnav .menu a {
        color: #888;
        margin-right: 15px;
      }
      .webnav .menu > div {
        border-bottom: 1px solid #ddd;
      }
      .webnav .menu > div.last {
        border-bottom: none;
      }
      .webnav:hover .menu {
        display: block;
      }
    </style>
  </head>
  <body>
    <div class="nav">
      <div class="wrap">
        <div class="logo"><img src="images/logo.gif" alt="" /></div>
        <ul>
          <li><a href="#">购物车</a></li>
          <li class="sep">|</li>
          <li><a href="#">优惠卷</a></li>
          <li class="sep">|</li>
          <li><a href="#">快速注卡</a></li>
          <li class="sep">|</li>
          <li><a href="#">各地购课</a></li>
          <li class="sep">|</li>
          <li><a href="#">手机报</a></li>
          <li class="sep">|</li>
          <li class="webnav">
            <a href="#">网站导航</a> <img src="images/open_icon.gif" alt="" />
            <div class="menu">
              <div>
                <a href="#">托福</a>
                <a href="#">雅思</a>
                <a href="#">考研</a>
                <a href="#">职称英语</a>
                <a href="#">初中</a>
                <a href="#">日语</a>
              </div>
              <div>
                <a href="#">网络课堂 </a>
                <a href="#">资讯中心</a>
                <a href="#">知识堂</a>
                <a href="#">大师讲坛</a>
                <a href="#">学习论坛</a>
                <a href="#">学词</a>
                <a href="#">考研搜校</a>
              </div>
              <div class="last">
                <a href="#">M-Zone</a>
                <a href="#">手机报</a>
                <a href="#">时时英语</a>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>
